<template>
  <div class="multi-model-settings">
    <div class="page-header">
      <h2>{{ $t('settings.multiModel.title') }}</h2>
      <p>{{ $t('settings.multiModel.description') }}</p>
    </div>
    
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>{{ $t('settings.multiModel.providerConfig') }}</span>
          <div class="header-actions">
            <el-button 
              type="primary" 
              @click="testConfig"
              :loading="testing"
              :disabled="!isConfigValid"
            >
              {{ $t('settings.multiModel.testConfig') }}
            </el-button>
            <el-button 
              type="success" 
              @click="saveConfig"
              :loading="saving"
            >
              {{ $t('settings.multiModel.saveConfig') }}
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="providers-container">
        <!-- 层级1：模型提供商配置 -->
        <div 
          v-for="(provider, index) in form.providers" 
          :key="provider.provider_id || index" 
          class="provider-item"
        >
          <el-card class="provider-card">
            <template #header>
              <div class="provider-header">
                <div class="provider-title">
                  <el-icon><Setting /></el-icon>
                  <span>{{ provider.provider_name || $t('settings.multiModel.providerNameTemplate', { index: index + 1 }) }}</span>
                </div>
                <div class="provider-actions">
                  <el-switch 
                    v-model="provider.is_active" 
                    :active-text="$t('settings.multiModel.actions.enable')" 
                    :inactive-text="$t('settings.multiModel.actions.disable')"
                  />
                  <el-button 
                    type="danger" 
                    size="small" 
                    @click="removeProvider(index)"
                    :disabled="form.providers.length <= 1"
                  >
                    {{ $t('settings.multiModel.actions.delete') }}
                  </el-button>
                </div>
              </div>
            </template>

            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item :label="$t('settings.multiModel.labels.providerName')" required>
                  <el-input 
                    v-model="provider.provider_name" 
                    :placeholder="$t('settings.multiModel.placeholders.providerName')"
                    clearable
                  />
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item :label="$t('settings.multiModel.labels.modelType')" required>
                  <el-select 
                    v-model="provider.model_type" 
                    :placeholder="$t('settings.multiModel.placeholders.selectModelType')"
                    @change="onModelTypeChange(provider)"
                  >
                    <el-option :label="$t('settings.multiModel.modelTypes.deepseek')" value="deepseek" />
                    <el-option :label="$t('settings.multiModel.modelTypes.openai')" value="openai" />
                    <el-option :label="$t('settings.multiModel.modelTypes.doubao')" value="doubao" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item :label="$t('settings.multiModel.labels.baseUrl')" required>
                  <el-input 
                    v-model="provider.base_url" 
                    :placeholder="$t('settings.multiModel.placeholders.baseUrl')"
                    clearable
                  />
                  <div class="form-tip">
                    <el-icon><InfoFilled /></el-icon>
                    <span>{{ $t('settings.multiModel.tips.baseUrlExamples') }}</span>
                  </div>
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item :label="$t('settings.multiModel.labels.modelName')" required>
                  <el-input 
                    v-model="provider.model" 
                    :placeholder="$t('settings.multiModel.placeholders.modelName')"
                    clearable
                  />
                  <div class="form-tip">
                    <el-icon><InfoFilled /></el-icon>
                    <span>{{ $t('settings.multiModel.tips.modelExamples') }}</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item :label="$t('settings.multiModel.labels.temperature')">
                  <el-slider 
                    v-model="provider.temperature" 
                    :min="0" 
                    :max="2" 
                    :step="0.1"
                    show-input
                    :show-input-controls="false"
                  />
                </el-form-item>
              </el-col>
              
              <el-col :span="8">
                <el-form-item :label="$t('settings.multiModel.labels.maxTokens')">
                  <el-input-number 
                    v-model="provider.max_tokens" 
                    :min="1" 
                    :max="100000"
                    :placeholder="$t('settings.multiModel.placeholders.noLimit')"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              
              <el-col :span="8">
                <el-form-item :label="$t('settings.multiModel.labels.rateLimit')">
                  <el-input-number 
                    v-model="provider.rate_limit" 
                    :min="1" 
                    :max="100"
                    style="width: 100%"
                  />
                  <div class="form-tip">
                    <el-icon><InfoFilled /></el-icon>
                    <span>{{ $t('settings.multiModel.tips.rateLimitTip') }}</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 层级2：API密钥配置 -->
            <el-divider content-position="left">
              <el-icon><Key /></el-icon>
              <span>{{ $t('settings.multiModel.labels.apiKeyConfig') }}</span>
            </el-divider>

            <div class="api-keys-container">
              <div 
                v-for="(key, keyIndex) in provider.api_keys" 
                :key="keyIndex" 
                class="api-key-item"
              >
                <el-input 
                  v-model="provider.api_keys[keyIndex]" 
                  type="password" 
                  :placeholder="$t('settings.multiModel.placeholders.apiKey')"
                  show-password
                  clearable
                />
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="removeApiKey(index, keyIndex)"
                  :disabled="provider.api_keys.length <= 1"
                >
                  {{ $t('settings.multiModel.actions.delete') }}
                </el-button>
              </div>
              
              <el-button 
                type="primary" 
                size="small" 
                @click="addApiKey(index)"
                style="margin-top: 8px;"
              >
                <el-icon><Plus /></el-icon>
                {{ $t('settings.multiModel.actions.addApiKey') }}
              </el-button>
            </div>
          </el-card>
        </div>

        <el-button 
          type="primary" 
          @click="addProvider"
          style="width: 100%; margin-top: 16px; height: 50px;"
          size="large"
        >
          <el-icon><Plus /></el-icon>
          {{ $t('settings.multiModel.addProvider') }}
        </el-button>
      </div>
    </el-card>

    <!-- 配置状态 -->
    <el-card class="status-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>{{ $t('settings.multiModel.configStatus') }}</span>
          <el-button 
            type="primary" 
            size="small" 
            @click="refreshStatus"
            :loading="loadingStatus"
          >
            {{ $t('common.refresh') }}
          </el-button>
        </div>
      </template>

      <div v-if="status" class="status-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="$t('settings.multiModel.totalProviders')">{{ status.total_providers }}</el-descriptions-item>
          <el-descriptions-item :label="$t('settings.multiModel.totalApiKeys')">{{ status.total_api_keys }}</el-descriptions-item>
          <el-descriptions-item :label="$t('settings.multiModel.currentProviderIndex')">{{ status.current_provider_index }}</el-descriptions-item>
        </el-descriptions>

        <div class="provider-details" style="margin-top: 16px;">
          <h4>{{ $t('settings.multiModel.providerDetails') }}</h4>
          <el-table :data="status.provider_details" style="width: 100%">
            <el-table-column prop="provider_name" :label="$t('settings.multiModel.providerName')" />
            <el-table-column prop="model_type" :label="$t('settings.multiModel.modelType')" width="100" />
            <el-table-column prop="api_key_count" :label="$t('settings.multiModel.apiKeyCount')" width="100" />
            <el-table-column prop="rate_limit" :label="$t('settings.multiModel.rateLimit')" width="100" />
            <el-table-column prop="current_requests" :label="$t('settings.multiModel.currentRequests')" width="120" />
            <el-table-column prop="is_available" :label="$t('common.status')" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.is_available ? 'success' : 'danger'">
                  {{ scope.row.is_available ? $t('common.available') : $t('common.rateLimited') }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { Setting, InfoFilled, Key, Plus } from '@element-plus/icons-vue'
import { multiModelConfigApi } from '@/services/api'

const { t } = useI18n()

interface ModelProvider {
  provider_id: string
  provider_name: string
  model_type: string
  base_url: string
  model: string
  temperature: number
  max_tokens: number | null
  api_keys: string[]
  rate_limit: number
  is_active: boolean
  current_key_index: number
}

interface ConfigStatus {
  total_providers: number
  total_api_keys: number
  current_provider_index: number
  provider_details: Array<{
    provider_id: string
    provider_name: string
    model_type: string
    api_key_count: number
    rate_limit: number
    current_requests: number
    last_request_time: number
    is_available: boolean
  }>
}

const testing = ref(false)
const saving = ref(false)
const loadingStatus = ref(false)
const status = ref<ConfigStatus | null>(null)

const form = reactive({
  providers: [
    {
      provider_id: 'deepseek_default',
      provider_name: t('settings.multiModel.defaultProviderName'),
      model_type: 'deepseek',
      base_url: 'https://api.deepseek.com/v1',
      model: 'deepseek-chat',
      temperature: 0.7,
      max_tokens: null,
      api_keys: [''],
      rate_limit: 2,
      is_active: true,
      current_key_index: 0
    }
  ],
  current_provider_index: 0
})

const isConfigValid = computed(() => {
  return form.providers.some(provider => 
    provider.is_active && provider.api_keys.some(key => key.trim() !== '')
  )
})

const generateProviderId = () => {
  return 'provider_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
}

const onModelTypeChange = (provider: ModelProvider) => {
  if (provider.model_type === 'deepseek') {
    provider.base_url = 'https://api.deepseek.com/v1'
    provider.model = 'deepseek-chat'
  } else if (provider.model_type === 'openai') {
    provider.base_url = 'https://api.openai.com/v1'
    provider.model = 'gpt-4o'
  } else if (provider.model_type === 'doubao') {
    provider.base_url = 'https://api.doubao.com'
    provider.model = 'doubao-v1.5'
  }
}

const addProvider = () => {
  const newProvider = {
    provider_id: generateProviderId(),
    provider_name: t('settings.multiModel.providerNameTemplate', { index: form.providers.length + 1 }),
    model_type: 'doubao',
    base_url: 'https://api.doubao.com',
    model: 'doubao-v1.5',
    temperature: 0.7,
    max_tokens: null,
    api_keys: [''],
    rate_limit: 2,
    is_active: true,
    current_key_index: 0
  }
  form.providers.push(newProvider)
}

const removeProvider = (index: number) => {
  form.providers.splice(index, 1)
}

const addApiKey = (providerIndex: number) => {
  form.providers[providerIndex].api_keys.push('')
}

const removeApiKey = (providerIndex: number, keyIndex: number) => {
  form.providers[providerIndex].api_keys.splice(keyIndex, 1)
}

const loadConfig = async () => {
  try {
    const config = await multiModelConfigApi.getConfig()
    // 确保每个提供商都有provider_id
    config.providers.forEach((provider: any) => {
      if (!provider.provider_id) {
        provider.provider_id = generateProviderId()
      }
    })
    Object.assign(form, config)
  } catch (error) {
    console.error('加载配置失败:', error)
    ElMessage.error(t('settings.multiModel.messages.loadFailed'))
  }
}

const saveConfig = async () => {
  try {
    // 验证配置
    for (const provider of form.providers) {
      if (!provider.provider_name.trim()) {
        ElMessage.error(t('settings.multiModel.messages.providerNameRequired'))
        return
      }
      if (!provider.provider_id) {
        provider.provider_id = generateProviderId()
      }
      if (provider.is_active && !provider.api_keys.some(key => key.trim())) {
        ElMessage.error(t('settings.multiModel.messages.apiKeyRequired', { name: provider.provider_name }))
        return
      }
    }
    
    saving.value = true
    await multiModelConfigApi.updateConfig(form)
    ElMessage.success(t('settings.multiModel.messages.saveSuccess'))
    await loadConfig()
  } catch (error: any) {
    console.error('保存配置失败:', error)
    ElMessage.error(error.response?.data?.detail || t('settings.multiModel.messages.saveFailed'))
  } finally {
    saving.value = false
  }
}

const testConfig = async () => {
  try {
    testing.value = true
    const response = await multiModelConfigApi.testConfig()
    if (response.success) {
      ElMessage.success(t('settings.multiModel.messages.testSuccess'))
    } else {
      ElMessage.error(t('settings.multiModel.messages.testFailed'))
    }
  } catch (error) {
    console.error('测试配置失败:', error)
    ElMessage.error(t('settings.multiModel.messages.testFailed'))
  } finally {
    testing.value = false
  }
}

const refreshStatus = async () => {
  try {
    loadingStatus.value = true
    const response = await multiModelConfigApi.getStatus()
    status.value = response
  } catch (error) {
    console.error('获取状态失败:', error)
    ElMessage.error(t('settings.multiModel.messages.getStatusFailed'))
  } finally {
    loadingStatus.value = false
  }
}

onMounted(async () => {
  await loadConfig()
  await refreshStatus()
})
</script>

<style scoped>
.multi-model-settings {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
}

.page-header p {
  margin: 0;
  color: #606266;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.providers-container {
  width: 100%;
}

.provider-item {
  margin-bottom: 20px;
}

.provider-card {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.provider-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.provider-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.form-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #909399;
  font-size: 12px;
}

.api-keys-container {
  width: 100%;
}

.api-key-item {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.api-key-item .el-input {
  flex: 1;
}

.status-card {
  margin-top: 20px;
}

.status-content {
  width: 100%;
}

.provider-details h4 {
  margin: 0 0 16px 0;
  color: #303133;
}

.el-divider {
  margin: 20px 0;
}

.el-divider__text {
  background-color: #fff;
  color: #303133;
  font-weight: 500;
}
</style> 